<template>
  <div class="s_wrap">
    <div class="top"></div>
    <!-- 主体内容区域 -->
    <article id="v2_fareTrans">
      <h1>查询票价、换乘</h1>
      <p class="v2_lead">查询两站之间的票价以及不同站点的公交换乘方式</p>
      <div id="v2_contentsInr">
        <div class="v2_wrap">
          <div class="v2_js-linkTab v2_section v2_sectionMSp">
            <ul class="v2_linkTab v2_js-transitSelect">
              <li class="v2_w50pPc">
                <a
                  href="javascript:void(0)"
                  v-bind:class="[{v2_active:searchType}]"
                  class="v2_js-linkTabBtn"
                  @click="searchType=true"
                >查询南昌地铁票价</a>
              </li>
              <li class="v2_w50pPc">
                <a
                  href="javascript:void(0)"
                  v-bind:class="[{v2_active:!searchType}]"
                  class="v2_js-linkTabBtn"
                  @click="searchType=false"
                >查询不同站点的公交换乘方式</a>
              </li>
            </ul>
          </div>
          <fieldset class="v2_transitForm v2_sectionS">
            <div v-if="searchType">
              <div class="start">
                <div class="start-station">
                  <div class="v2_transitFormItem">
                    <legend class="v2_txtBold">
                      <label for="transitDep">出发站</label>
                    </legend>
                    <div class="v2_formBtnRight">
                      <input
                        type="text"
                        id="transitDep"
                        name="inputDeparture"
                        class="v2_formBtnRightInput v2_js-transitDep ui-autocomplete-input"
                        placeholder="出发站"
                        v-model="startSite"
                        ref="startSite"
                        @focus="brotherRoadAble"
                        @blur="brotherRoadDisable"
                      />
                    </div>
                  </div>
                </div>
                <!-- 当对应的按钮focus选中时 -->
                <!-- 鼠标移出时隐藏 -->
                <div
                  id="startselect"
                  v-if="startselect"
                  class="ticket_select class_tag_3_3"
                  style="display:none"
                  @mouseleave.self="selectDisable"
                >
                  <div class="title_line front_13">
                    <!-- 点击显示一号线信息 -->
                    <div @click="roadChange" value="one" style="color:rgb(147, 157, 177);">1号线</div>
                    <!-- 点击显示二号线信息 -->
                    <div @click="roadChange" value="two" style="color:rgb(147, 157, 177);">2号线</div>
                  </div>
                  <div style="clear: both;"></div>
                  <div class="div_fram_3_3 div_fram" id="div_fram_3_3">
                    <div
                      class="block_site_3_1"
                      :style="{display:selectroad==='one'?'block':'none'}"
                    >
                      <div class="lineNumber">1</div>
                      <div class="siteName front_13">
                        <!-- 路线一 -->
                        <!-- 选择站点 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadOne"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                    <div
                      class="block_site_3_2"
                      :style="{display:selectroad==='two'?'block':'none'}"
                    >
                      <div class="lineNumber">2</div>
                      <div class="siteName front_13">
                        <!-- 路线二 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadTwo"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                  </div>
                </div>
              </div>
              <div class="end">
                <div class="end-station">
                  <div class="v2_transitFormItem">
                    <legend class="v2_txtBold">
                      <label for="transitDep">终点站</label>
                    </legend>
                    <div class="v2_formBtnRight">
                      <input
                        type="text"
                        id="transitDep"
                        name="inputDeparture"
                        class="v2_formBtnRightInput v2_js-transitDep ui-autocomplete-input"
                        placeholder="终点站"
                        v-model="endSite"
                        ref="endSite"
                        @focus="brotherRoadAble"
                        @blur="brotherRoadDisable"
                      />
                    </div>
                  </div>
                </div>
                <!-- 鼠标移出时隐藏 -->
                <div
                  id="endselect"
                  v-if="endselect"
                  class="ticket_select class_tag_3_3"
                  style="display:none"
                  @mouseleave.self="selectDisable"
                >
                  <div class="title_line front_13">
                    <!-- 点击显示一号线信息 -->
                    <div @click="roadChange" value="one" style="color:rgb(147, 157, 177);">1号线</div>
                    <!-- 点击显示二号线信息 -->
                    <div @click="roadChange" value="two" style="color:rgb(147, 157, 177);">2号线</div>
                  </div>
                  <div style="clear: both;"></div>
                  <div class="div_fram_3_3 div_fram" id="div_fram_3_3">
                    <div
                      class="block_site_3_1"
                      :style="{display:selectroad==='one'?'block':'none'}"
                    >
                      <div class="lineNumber">1</div>
                      <div class="siteName front_13">
                        <!-- 路线一 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadOne"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                    <div
                      class="block_site_3_2"
                      :style="{display:selectroad==='two'?'block':'none'}"
                    >
                      <div class="lineNumber">2</div>
                      <div class="siteName front_13">
                        <!-- 路线二 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadTwo"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="!searchType" v-on:click.self="toFalse">
              <div class="start">
                <div class="start-station">
                  <div class="v2_transitFormItem">
                    <legend class="v2_txtBold">
                      <label for="transitDep">查询站点</label>
                    </legend>
                    <div class="v2_formBtnRight">
                      <input
                        type="text"
                        id="transitDep"
                        name="inputDeparture"
                        class="v2_formBtnRightInput v2_js-transitDep ui-autocomplete-input"
                        placeholder="查询站点"
                        v-model="site"
                        ref="searchSite"
                        @focus="brotherRoadAble"
                        @blur="brotherRoadDisable"
                      />
                    </div>
                  </div>
                </div>
                <!-- 鼠标离开时隐藏元素 -->
                <div
                  id="searchselect"
                  v-if="startselect"
                  class="ticket_select class_tag_3_3"
                  style="display:none"
                  @mouseleave.self="selectDisable"
                >
                  <div class="title_line front_13">
                    <!-- 点击显示一号线信息 -->
                    <div @click="roadChange" value="one" style="color:rgb(147, 157, 177);">1号线</div>
                    <!-- 点击显示二号线信息 -->
                    <div @click="roadChange" value="two" style="color:rgb(147, 157, 177);">2号线</div>
                  </div>
                  <div style="clear: both;"></div>
                  <div class="div_fram_3_3 div_fram" id="div_fram_3_3">
                    <div
                      class="block_site_3_1"
                      :style="{display:selectroad==='one'?'block':'none'}"
                    >
                      <div class="lineNumber">1</div>
                      <div class="siteName front_13">
                        <!-- 路线一 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadOne"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                    <div
                      class="block_site_3_2"
                      :style="{display:selectroad==='two'?'block':'none'}"
                    >
                      <div class="lineNumber">2</div>
                      <div class="siteName front_13">
                        <!-- 路线二 -->
                        <div
                          @click="selectSite"
                          v-for="(item, index) in roadTwo"
                          :key="index"
                        >{{item.site}}</div>
                      </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="ticket_split"></div>
                  </div>
                </div>
              </div>
            </div>
            <p class="v2_section v2_sectionMSp">
              <a
                href="javascript:void(0)"
                class="v2_btnLCenter v2_w50pPc v2_formSubmitBtn"
                @click="searchInfo"
              >查询</a>
            </p>
            <div v-if="!searchType" class="v2_changeInfo">
              <div>
                <div v-for="searchSite in searchSiteInfo" :key="searchSite.name">
                  <div class="searchSite">出口信息：{{ searchSite.name }}</div>
                  <li v-for="item in searchSite.export" :key="item.id">
                    <div v-for="(t,key) in item" :key="key">
                      <div class="export">{{ key }}出口：</div>
                      <div class="line">
                        <span>公交路线：</span>
                        {{t}}
                      </div>
                    </div>
                  </li>
                </div>
              </div>
            </div>
            <ul class="v2_listNote02 v2_txtNote v2_section v2_sectionMSp">
              <li>本票价和换乘查询服务，以向乘客提供介绍为根本目的，不提供以数据再利用为目的的大数据访问。</li>
              <li>请理解本服务的初衷，勿以数据再利用等目的进开往访问。</li>
              <li>如发现此类开往为时，可能会不经通告限制使用票价和换乘查询服务，敬请知悉。</li>
            </ul>
          </fieldset>
        </div>
      </div>
    </article>
    <section class="relatedLinksCard">
      <h2 class="s_h2center">相关链接</h2>
      <div class="vwrapper">
        <a href="#" v-for="(item,index) in $store.state.relatedLinks" :key="index">
          <div class="s_block">
            <h3>{{item.desc}}</h3>
            <div class="v2_pic">
              <img :src="item.path" width="62" height="63" alt />
            </div>
          </div>
        </a>
      </div>
    </section>
    <!-- 站点信息 -->
    <mdialog v-show="showDialog" :dialog-option="dialogOption" ref="mdialog"></mdialog>
    <div id="mysubway"></div>
  </div>
</template>
<script type="text/javascript" src=`https://webapi.amap.com/subway?v=1.0&key=10798119a44cd2ceeccdd30789277566&callback=cbk`></script>
<script>
var mysubway = subway("mysubway", { easy: 1 });
</script>
<script>
//引入模态框
import mdialog from "../common/mdialog";
import store from "../../store/index";
export default {
  store,
  data() {
    return {
      //模态框信息
      dialogOption:{
          title:String,
          text:String,
      },
      // 模态框显示
      showDialog: false,
      //select road默认显示一号线内容
      selectroad: "one",
      // searchType:查询的方式，地铁票价查询fare或者换乘站点查询transfer
      searchType: true,
      site: "双港", //查询换乘信息站点
      startSite: "双港", //起点站
      endSite: "双港", //终点站
      //显示站点信息
      startselect: true,
      endselect: true,
      //路线一
      roadOne: [
        { coustomvale: "x1", site: "双港" },
        { coustomvale: "x2", site: "孔目湖" },
        { coustomvale: "x3", site: "长江路" },
        { coustomvale: "x4", site: "珠江路" },
        { coustomvale: "x5", site: "庐山南大道" },
        { coustomvale: "x6", site: "绿茵路" },
        { coustomvale: "x7", site: "卫东" },
        { coustomvale: "x8", site: "地铁大厦" },
        { coustomvale: "x9", site: "秋水广场" },
        { coustomvale: "x10", site: "滕王阁" },
        { coustomvale: "x11", site: "万寿宫" },
        { coustomvale: "x12", site: "八一馆" },
        { coustomvale: "x13", site: "八一广场" },
        { coustomvale: "x14", site: "丁公路北" },
        { coustomvale: "x15", site: "师大南路" },
        { coustomvale: "x16", site: "彭家桥" },
        { coustomvale: "x17", site: "谢家村" },
        { coustomvale: "x18", site: "青山湖大道" },
        { coustomvale: "x19", site: "高新大道" },
        { coustomvale: "x20", site: "艾溪湖西" },
        { coustomvale: "x21", site: "艾溪湖东" },
        { coustomvale: "x22", site: "太子殿" },
        { coustomvale: "x23", site: "奥体中心" },
        { coustomvale: "x24", site: "瑶湖西" }
      ],
      //路线二
      roadTwo: [
        { coustomvale: "y1", site: "南路" },
        { coustomvale: "y2", site: "大岗" },
        { coustomvale: "y3", site: "生米" },
        { coustomvale: "y4", site: "九龙湖南" },
        { coustomvale: "y5", site: "市民中心" },
        { coustomvale: "y6", site: "鹰潭街" },
        { coustomvale: "y7", site: "国博" },
        { coustomvale: "y8", site: "西站南广场" },
        { coustomvale: "y9", site: "南昌西站" },
        { coustomvale: "y10", site: "龙岗" },
        { coustomvale: "y11", site: "国体中心" },
        { coustomvale: "y12", site: "卧龙山" },
        { coustomvale: "y13", site: "岭北路" },
        { coustomvale: "y14", site: "前湖大道" },
        { coustomvale: "y15", site: "学府大道东" },
        { coustomvale: "y16", site: "翠苑路" },
        { coustomvale: "y17", site: "地铁大厦" },
        { coustomvale: "y18", site: "雅苑路" },
        { coustomvale: "y19", site: "红谷中大道" },
        { coustomvale: "y20", site: "阳明公园" },
        { coustomvale: "y21", site: "青山路口" },
        { coustomvale: "y22", site: "福州路" },
        { coustomvale: "y23", site: "八一广场" },
        { coustomvale: "y24", site: "永叔路" },
        { coustomvale: "y25", site: "丁公路南" },
        { coustomvale: "y26", site: "南昌火车站" },
        { coustomvale: "y27", site: "顺外" },
        { coustomvale: "y28", site: "辛家庵" }
      ],
      //站点换乘信息
      siteChangeInfo: [
        {
          name: "双港",
          export: [{ A: "211,223,304" }, { B: "211,223,304,520" }]
        },
        {
          name: "长江路",
          export: [{ B: "211,223,304,5219,503,506,311" }]
        },
        {
          name: "珠江路",
          export: [
            { A: "19,311,503,506" },
            { B: "311" },
            { C: "19,311,503,506" }
          ]
        },
        {
          name: "庐山南大道",
          export: [{ C: "304,214,223,240" }]
        },
        {
          name: "绿茵路",
          export: [
            { C: "19,22,228,229,503" },
            { D: "19,22,228,229,247,313,512" }
          ]
        },
        {
          name: "卫东",
          export: [{ A: "217" }, { B: "247,503" }, { C: "214" }, { D: "214" }]
        },
        {
          name: "地铁大厦",
          export: [{ B: "221,227,228,229,503,708,313" }, { D: "224,512" }]
        },
        {
          name: "秋水广场",
          export: [
            { B: "221,224,227,228,229,503,512,708,313" },
            { C: "221,224,227,228,229,503,512,708,313" },
            { D: "228" },
            { E: "228" }
          ]
        },
        {
          name: "滕王阁",
          export: [{ A: "205" }, { B: "25,27,5,12,18,20,305,307" }]
        },
        { name: "万寿宫", export: [{ D: "2,18,302,307" }] },
        {
          name: "八一馆",
          export: [
            { A: "33，17，27，205" },
            { C: "2,25,33,232,202,205,302" },
            { D: "5,18,13,305,33" },
            { E: "18,27" }
          ]
        },
        {
          name: "八一广场",
          export: [
            { B: "2,13,301,212,205,230" },
            { D: "10,21,29,206,232" },
            { H: "230" },
            { G: "1,2,4,6,7,10,22,88,202,208,26，机场公交1线" },
            { A: "1,2,4,6,10,22,88,705,303,7,13,215,220,231,308,26,205" }
          ]
        },
        { name: "丁公路北", export: [{ A: "3,4,7,215,220" }] },
        {
          name: "师大南路",
          export: [{ A: "4,13,16,28" }, { B: "16,28,301" }, { D: "18" }]
        },
        { name: "彭家桥", export: [{ C: "308,7,28,220,215,216,36" }] },
        {
          name: "谢家村",
          export: [{ A: "7,216" }, { B: "7,220,208," }, { C: "220,208" }]
        },
        { name: "青山湖大道", export: [{ A: "207,220,308,7" }] },
        {
          name: "高新大道",
          export: [
            { A: "7,207,220,308" },
            { B: "7,207,220,308" },
            { C: "7,207,220,308" },
            { D: "7,207,220,308" }
          ]
        },
        { name: "艾溪湖西", export: [{ D: "7,208,231" }] },
        {
          name: "艾溪湖东",
          export: [
            { A: "208,220,258,308,K220，高铁巴士3路" },
            { B: "208,220,258,308,K220，高铁巴士3路" }
          ]
        },
        {
          name: "太子殿",
          export: [{ A: "220,208,258" }, { B: "220,208,258" }, { C: "226" }]
        },
        {
          name: "奥体中心",
          export: [{ A: "220,308" }, { B: "220,308,208" }, { C: "129,226" }]
        },
        { name: "瑶湖西", export: [{ A1: "226" }, { A2: "226" }] },
        { name: "九龙湖南", export: [{ "2": "501,817,839,850" }] },
        { name: "鹰潭街", export: [{ "4": "39长，501,817,839,850" }] },
        { name: "国博", export: [{ "2": "39长，501，817,839,850" }] },
        {
          name: "南昌西站",
          export: [
            {
              "2":
                "高铁1线，高铁2线，高铁4线，高铁5线，高铁定制线（高铁西客站-火车站西广场、高铁西客站-莲塘），708路，233路，503路"
            }
          ]
        },
        { name: "龙岗", export: [{ "3": "233,503,707,817,839" }] },
        {
          name: "国体中心",
          export: [
            {
              "4":
                "51,503，高铁3线，高铁7线，高铁8线，西客站至莲塘定制线，西客站至火车站定制线"
            }
          ]
        },
        { name: "卧龙山", export: [{ "1": "503" }, { "4": "503" }] },
        { name: "岭北路", export: [{ "2": "503" }] },
        { name: "前湖大道", export: [{ "1": "503,233" }] },
        { name: "学府大道东", export: [{ "4": "503,235" }] }
      ],
      // 查询到的信息
      searchSiteInfo: Array
    };
  },
  //定义指令：获取输入框焦点事件
  directives: {
    focus: {
      //指令定义
      inserted: function(el) {
        el.focus();
      }
    }
  },
  methods: {
    //   查询票价或者换乘信息
    searchInfo() {
      let that = this;
      let Index = -1;
      if (this.searchType) {
        //查询票价:
        let start = that.startSite;
        let end = that.endSite;
        this.showDialog = true;
        this.dialogOption.title= "警告"
        this.dialogOption.text = "查询接口暂未开放，敬请期待！"
        this.$refs.mdialog
          .confirm()
          .then(() => {
            this.showDialog = false;
          })
          .catch(() => {
            this.showDialog = false;
          });
      } else {
        //查询换乘信息
        this.searchSiteInfo = that.siteChangeInfo.filter(
          //使用过滤器筛选信息
          function(item) {
            return item.name == that.site;
          }
        );
        // let flag = this.siteChangeInfo.some(
        //   function (item,index) {
        //     Index = index
        //     return item.name = that.site
        //   }
        // )
        // if (flag) {
        //   console.log(Index);

        //   this.searchSiteInfo = this.siteChangeInfo[Index]
        //   console.log(JSON.stringify(this.siteChangeInfo[Index]))

        // }else{
        //   console.log("无该站点信息");

        // }
      }
    },
    // 输入框获取与失去焦点
    brotherRoadAble(e) {
      let select = e.path[4].children[1];
      select.style.display = "block";
    },
    brotherRoadDisable(e) {},
    // 切换显示的路线
    roadChange(e) {
      let text = e.target.innerText;
      if (text == "1号线") {
        this.selectroad = "one";
      } else if (text == "2号线") {
        this.selectroad = "two";
      } else {
      }
    },
    // 鼠标移出路线信息的时候隐藏
    selectDisable(e) {
      e.target.style.display = "none";
      // 失去焦点
      e.path[1].children[0].children[0].children[1].children[0].blur();
    },
    selectSite(e) {
      //取消选择框显示+值变化
      let siteInput = e.path[5].children[0].children[0].children[1].children[0];
      siteInput.value = e.target.innerText;
      //根据当前选择的查询方式进行修改
      if (this.searchType) {
        this.startSite = this.$refs.startSite.value;
        this.endSite = this.$refs.endSite.value;
      } else {
        this.site = this.$refs.searchSite.value;
      }
    }
  },
  components: {
    mdialog
  }
};
</script>

<style scoped>
@import "../../assets/css/common.css";
.top {
  width: 100%;
  height: 90px;
  background: #00467e;
}
/* 相关链接 */
.relatedLinksCard .vwrapper {
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  max-width: 1146px;
  margin: 0 auto;
}
.relatedLinksCard a {
  position: relative;
  display: flex;
  align-items: center;
  width: 23.1%;
  min-height: 100px;
  text-decoration: none;
  color: #00467e;
  padding-left: 18px;
  border: 1px solid #ccc;
  margin-right: 15px;
}
.relatedLinksCard .s_block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.relatedLinksCard h3 {
  font-size: 1rem;
  line-height: 1.25;
  background: url("/img/icon_arrow_blue.png") no-repeat left 3px;
  background-size: 7px auto;
  padding-left: 16px;
}
.relatedLinksCard .v2_pic {
  min-width: 30px;
}
.relatedLinksCard a .v2_pic {
  width: 23.4%;
  margin-right: 4.9%;
}
.relatedLinksCard .v2_pic img {
  width: 100%;
  height: auto;
}
.relatedLinksCard a:hover {
  background-color: #e1e4e7;
}
.s_h2center {
  font-size: 2rem;
  color: #00467e;
  text-align: center;
  margin: 80px 0 48px;
}
/* 主体区域样式 */
.s_wrap {
  width: 100%;
}
article {
  display: block;
  font-family: Helvetica, Arial, "sans-serif";
  background-size: cover;
  width: 100%;
  height: auto;
  margin-top: 50px;
}
h1 {
  position: relative;
  font-size: 2.2rem;
  color: #00467e;
  text-align: center;
  word-break: keep-all;
  padding-bottom: 20px;
  margin-bottom: 42px;
}
h1::before,
h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 49px;
  height: 4px;
  background-color: #00a3d9;
  margin-left: -49px;
}
h1::after {
  background-color: #00467e;
  margin-left: 1px;
}
p.v2_lead {
  max-width: 1146px;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  margin: 0 auto 80px;
}
/* 查询切换栏 */
.v2_wrap {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto;
}
.v2_section {
  margin-top: 60px;
}
.v2_linkTab {
  display: flex;
  justify-content: center;
  position: relative;
  background: #dfe4e6;
  padding: 0 8px;
}

.v2_linkTab li {
  display: flex;
  position: relative;
  border-left: 1px #fff solid;
  border-bottom: 1px #fff solid;
}
.v2_linkTab li {
  width: 49.9%;
}
.v2_linkTab li a.v2_active,
.v2_linkTab li a.v2_active:hover {
  box-shadow: inset 0 4px 0 #00a3d9;
  background-color: #fff;
}

.v2_linkTab li a {
  width: 100%;
  padding: 12px 10px 10px;
  display: block;
  text-align: center;
  font-weight: bold;
  color: #000;
  position: relative;
}

#v2_fareTrans .v2_linkTab li a {
  font-size: 1rem;
}
/* 查询框 */
.v2_transitForm legend {
  margin-bottom: 10px;
}
.v2_transitForm .v2_formBtnRightInput,
.v2_transitForm .v2_formBtnRightSubmitBtn {
  height: 40px;
}

.v2_formBtnRightInput {
  border: 1px #737373 solid;
  display: table-cell;
}
.v2_formBtnRightInput {
  padding: 0 10px;
  height: 60px;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.4) inset;
  font-size: 1.28571rem;
}

/* 查询按钮 */
#v2_fareTrans .v2_btnLCenter,
#v2_fareTransResult .v2_btnLCenter {
  background-color: #00467e;
  font-size: 1.2rem;
}
.v2_btnLCenter:not(.v2_btnGray),
.v2_btnLCenterL:not(.v2_btnGray) {
  color: #fff;
}
.v2_btnLCenter,
.v2_btnLCenterL {
  display: block;
  background-color: #00467e;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.v2_w50pPc {
  width: 50% !important;
}
.v2_btnLCenter,
.v2_btnLCenterL {
  width: 65%;
  font-size: 0.8rem;
  padding: 15px 15px;
}
/* 站点选择样式 */
.ticket_select {
  float: left;
  position: absolute;
  z-index: 99999;
  background-color: rgb(248, 248, 248);
}
.front_13 {
  font-size: 13px;
}
.title_line {
  width: 279px;
  line-height: 30px;
  border-top-color: rgb(225, 226, 228);
  border-right-color: rgb(225, 226, 228);
  border-left-color: rgb(225, 226, 228);
  border-top-width: 1px;
  border-right-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-left-style: solid;
}
.title_line div {
  color: rgb(147, 157, 177);
  padding-left: 20px;
  float: left;
  cursor: pointer;
}
.div_fram {
  border: 1px solid rgb(225, 226, 228);
  width: 285px;
  height: 260px;
}
.lineNumber {
  width: 30px;
  height: 220px;
  color: rgb(147, 157, 177);
  line-height: 220px;
  font-size: 24px;
  margin-left: 8px;
  float: left;
}
.siteName {
  margin-top: 0px;
}

.front_13 {
  font-size: 13px;
}
.siteName div {
  width: 80px;
  color: rgb(147, 157, 177);
  padding-top: 5px;
  float: left;
  cursor: pointer;
}
.ticket_split {
  width: 220px;
  height: 3px;
  margin-left: 20px;
}
/* 底部导航栏样式 */
.v2_breadCrumb {
  max-width: 1280px;
  padding: 0 68px;
  margin: 0 auto 22px;
  margin-top: 30px;
}
.v2_breadCrumb ul {
  display: flex;
  list-style: none;
}
.v2_breadCrumb li {
  font-size: 0.8rem;
  color: #000;
}
.v2_breadCrumb li a {
  color: #00467e;
  text-decoration: none;
}
.v2_breadCrumb li a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  background: url("/img/icon_bread_arrow.png") no-repeat;
  background-size: 6px auto;
  margin: 0 11px;
}
/* 查询换乘方式样式 */
.start-station {
  display: flex;
  position: relative;
}
.v2_changeInfo {
  margin-top: 20px;
}
.searchSite {
  display: inline-block;
  padding: 5px;
  background: rgb(53, 73, 94);
  color: white;
  width: auto;
  border-radius: 5px;
  text-align: center;
}
.export {
  margin-top: 10px;
  padding: 2px;
  border-radius: 4px;
  display: inline-block;
  background: rgb(127, 207, 171);
  color: white;
  width: auto;
}
.line {
  margin-top: 3px;
}
.line span {
  display: inline-block;
  border-radius: 10px;
  padding: 4px;
  margin-right: 5px;
  color: white;
  background: rgb(255, 131, 68);
}
.v2_listNote02 > li:before {
  content: "*";
  display: inline-block;
  width: 1em;
  text-align: center;
  margin-left: -1em;
}
/* 移动端 */
@media screen and (max-width: 700px) {
  
.relatedLinksCard .vwrapper{
  display: flex;
  flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
}
  .relatedLinksCard a {
    display: block;
    width: 40.4%;
  }

  .relatedLinksCard a {
    margin: 8px;
  }
  .relatedLinksCard a .pic {
    margin-top: 15px;
  }

  .breakCrumb {
    margin: 20px auto 22px;
  }
  .v2_wrap{
    width: 100%;
    padding :0;
  }
}
</style>
